<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="base.jsp"  %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
	<title>登陆页面</title>
	<link rel="stylesheet" type="text/css" href="style/reset.css" media="all" />
	<link rel="stylesheet" type="text/css" href="style/layout.css" media="all" />
	<link rel="stylesheet" type="text/css" href="style/invalid.css" media="all" />
	<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
	<script type="text/javascript" src="script/jquery-1.4.3.min.js"></script>
	<script type="text/javascript" src="script/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript" src="script/jquery.tipTip.minified.js"></script>
	<script type="text/javascript" src="script/simpla.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var uflag = false;
			var pflag = false;
			var sflag = true;
			$("#subbutton").click(function(){
				var username = $("#username").val();
				var password = $("#password").val();
				if(username.length>=3 && username.length<=12 && password.length>=6 && password.length<=12 && sflag) {
					$.get("user!login.jspx","name="+username+"&password="+password,function(data){
						$(data).each(function(){
							if(this.type == "success") {
								$("#msg div").html(this.message).parent().slideDown().show().fadeTo(400,1);
								window.location.href="${basePath}/index.jspx";
							} else if(this.type == "terror") {
								$("#validatediv p input").val("");
								$("#validatediv").show();
								$("#validatediv p img").attr("src","captcha.jspx?id="+Math.random());
								$("#msg div").html(this.message).parent().slideDown().show().fadeTo(400,1);
							} else if(this.type == "ferror") {
								sflag = false;
								$("#msg div").html("登陆失败超过6次，该账户已被禁用").parent().slideDown().show().fadeTo(400,1);
							} else {
								$("#msg div").html(this.message).parent().slideDown().show().fadeTo(400,1);
							}
						});
					});
				}
			});
			$("#username").blur(function(){
				var username = $(this).val();
				if(username.trim().length == 0) {
					$("#msg div").html("用户名不能为空").parent().slideDown().show().fadeTo(400,1);
					$("#username").addClass("error");
					uflag = false;
				} else if(username.trim().length < 3) {
					$("#msg div").html("用户名至少为三位").parent().slideDown().show().fadeTo(400,1);
					$("#username").addClass("error");
					uflag = false;
				} else {
					$("#username").removeClass("error");
					uflag = true;
				}
			});
			$("#password").blur(function(){
				var password = $(this).val();
				if(password.trim().length == 0) {
					$("#msg div").html("密码不能为空").parent().slideDown().show().fadeTo(400,1);
					$("#password").addClass("error");
					pflag = false;
				} else if(password.trim().length < 6 || password.trim().length > 12) {
					$("#msg div").html("密码长度在6到12位之间").parent().slideDown().show().fadeTo(400,1);
					$("#password").addClass("error");
					pflag = false;
				} else {
					$("#password").removeClass("error");
					pflag = true;
				}
			});
			
		});
		
		function refresh(obj) {
			obj.src = "captcha.jspx?id="+Math.random();
		}
	</script>
</head>
<body id="login">
	<div id="login-wrapper">
		<div id="login-top" class="png-bg">
			
			<img id="logo" alt="New Mine logo" src="${basePath }/images/logo.png" />
		</div>
		<form action="#" method="post">
		<div id="login-content">
			<div id="msg" class="notification information png_bg" style="opacity: 0; display: none;">
				<div></div>
			</div>
			<p>
				<label for="username">用户名：</label>
				<input type="text" name="user.name" id="username" class="text-input" title="用户名字母数字和下划线组成" />
			</p>
			<div class="clear"></div>
			<p>
				<label for="password">密&nbsp&nbsp&nbsp&nbsp码：</label>
				<input type="password" name="user.password" id="password" class="text-input" title="密码长度在6-12位"/>
			</p>
			<div class="clear"></div>
			<div id="validatediv" style="display:none;">
			<p>
				<label for="validate">验证码：</label>
				<input type="text" class="text-input" name="validatecode" id="validate" value="000000"/>
			</p>
			<p>
				<img src="captcha.jspx?id=0" alt="点击更换验证码" class="tip right" onclick="javascript:refresh(this);"/>
			</p>
			</div>
			<div class="clear"></div>
			<p>
				<input id="subbutton" type="button" value="登录" class="button" />
			</p>

		</div>
		</form>
	</div>
	
</body>	
</html>
